     <!-- filepath: src/App.vue -->
<template>
  <div style="padding: 100px 100px 10px;">
    <h2>读小说 http://www.biquge.com.tw/2_2456/</h2>
    <form class="bs-example bs-example-form" role="form" @submit.prevent="onSubmit">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input
          type="text"
          class="form-control"
          placeholder="请输入小说地址"
          v-model="address"
        />
        <input
          type="text"
          class="form-control"
          placeholder="请输入章节目录所在节点"
          v-model="listLabel"
        />
        <span class="input-group-btn">
          <button type="submit" class="btn btn-default">提交</button>
        </span>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const address = ref('')
const listLabel = ref('')

function onSubmit() {
  // 可用 fetch/axios 提交到后端
  fetch('/book/list', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ address: address.value, listLabel: listLabel.value })
  }).then(res => res.json()).then(data => {
    // 处理返回结果
    console.log(data)
  })
}
</script>

<style>
@import '/static/bootstrap-3.3.7-dist/css/bootstrap.min.css';
</style>